<template>
    <div class="oneInfo">
        <el-card>
            <p class="title">{{currentInformation.title}}</p>
            <p class="note">
                <label v-if="currentInformation.date != null">创建时间：{{currentInformation.date}}&nbsp;&nbsp;</label><label v-else></label>
                <label v-if="currentInformation.origin != null">来源：{{currentInformation.origin}}&nbsp;&nbsp;</label><label v-else></label>
                <label v-if="currentInformation.author != null">作者：{{currentInformation.author}}&nbsp;&nbsp;</label><label v-else></label>
            </p>
            <div align="center">
                <img
                    :src="showUrl + currentInformation.id"
                    alt=""
                    class="infoImage"
                >
            </div>
            <div
                class="content"
                v-html="currentInformation.content"
            ></div>
            <el-link @click="toPreInfo(preInformation.id)">上一页：{{preInformation.title}}</el-link>
            <el-link
                @click="toNextInfo(nextInformation.id)"
                style="float: right"
            >下一页：{{nextInformation.title}}</el-link>
        </el-card>

    </div>
</template>

<script>
export default {
    data() {
        return {
            currentInformation: {
                id: 0
            },
            id: 0,
            showUrl: this.$uploadPath + "/industry/getImage?id=0",
            preInformation: {},
            nextInformation: {}
        };
    },
    methods: {
        getCurrentInfo(id) {
            this.$http("/industry/getIndustryById?id=" + id).then(response => {
                this.currentInformation = response.data;
            });
        },
        getPreInfo(id) {
            this.$http("/industry/getPreInfo?id=" + id).then(response => {
                this.preInformation = response.data;
            });
        },
        getNextInfo(id) {
            this.$http("/industry/getNextInfo?id=" + id).then(response => {
                this.nextInformation = response.data;
            });
        },
        toPreInfo(id) {
            this.id = id;
        },
        toNextInfo(id) {
            this.id = id;
        }
    },
    watch: {
        id(newValue, oldValue) {
            this.$http("/industry/getIndustryById?id=" + this.id).then(
                response => {
                    this.currentInformation = response.data;
                    this.getPreInfo(this.id);
                    this.getNextInfo(this.id);
                }
            );
        }
    },
    mounted() {
        this.id = this.$route.query.id;
        this.currentInformation.id = this.id;
    }
};
</script>

<style>
.oneInfo .el-card {
    width: 600px;
    margin: 0 auto;
    margin-bottom: 20px;
}
.oneInfo img {
    margin: 0 auto;
    display: inline-block;
    height: auto;
    max-width: 100%;
}
.oneInfo .title {
    text-align: center;
    font-family: "黑体";
    font-size: 20px;
}
.oneInfo .note {
    text-align: center;
}
.oneInfo .content {
    font-family: "仿宋";
    line-height: 28px;
}
</style>